<template>
	<view class="get-coupon-page">

		<tabs sticky-bg-color="transparent" :show-bar="true" :current="active" bg-color="transparent"
			@change="changeActive" :config="{activeColor: '#24A3FF', underLineColor: '#24A3FF'}">
			<tab title="全部"></tab>
			<tab title="租赁券"></tab>
			<tab title="零售券"></tab>
		</tabs>


		<view class="main-box">

			<view class="item" v-for="(item, index) in couponList" :key="index">
				<image v-if="item.type == 1" src="../../static/images/coupon_type_1.png" mode="widthFix" class="type-icon"></image>
				<image v-if="item.type == 2" src="../../static/images/coupon_type_2.png" mode="widthFix" class="type-icon"></image>
				<view class="top-bar">
					<view class="left">
						<image v-if="item.type == 1" src="../../static/images/coupon_type_icon_1.png" mode="widthFix" class="icon"></image>
						<image v-if="item.type == 2" src="../../static/images/coupon_type_icon_2.png" mode="widthFix" class="icon"></image>
						<view class="info">
							<text class="text">零售商品满减劵</text>
							<text class="date">2024.01.24-2024.02.28</text>
						</view>
					</view>
					<view class="right">
						<price-format color="var(--primary-price-color)" :first-size="56" :subscript-size="30"
							:price="50" :weight="500"></price-format>
						<text class="text">满500可用</text>
					</view>
				</view>

				<image src="../../static/images/line.png" mode="" class="line-img"></image>

				<view class="footer-bar">
					<view class="left">
						<text class="desc">零售商城可用</text>
						<view class="btn" @tap="onToggleItemDesc(item, index)">
							使用说明
							<u-icon v-if="!item.isOpen" class="ml10" name="arrow-down" color="#2979ff" size="28"></u-icon>
							<u-icon v-else class="ml10" name="arrow-up" color="#2979ff" size="28"></u-icon>
						</view>
					</view>
					<view class="right">
						<view v-if="item.type == 1" class="btn btn1">立即领取</view>
						<view v-if="item.type == 2" class="btn btn2">去使用</view>
					</view>
				</view>

				<view class="context" v-if="item.isOpen">
					<view class="row">
						<view class="label">使用时间：</view>
						<view class="text">2024.01.24-2024.02.28</view>
					</view>
					<view class="row">
						<view class="label">编号：</view>
						<view class="text">fjlkjlkjflww23878</view>
					</view>
					<view class="row">
						<view class="text">此文字内容为后内容为后内容为后台编辑，此处为占位，开发查看标注与文字...</view>
					</view>
				</view>
			</view>


			<!-- 			<view v-else class="column-center" style="padding-top: 200rpx">
			    <image class="img-null" src="/static/images/coupon_null.png"></image>
			    <text class="muted">暂无优惠券可领～</text>
			</view> -->
		</view>

		<view class="footer-box">
			<view class="btn">使用券码领券</view>
		</view>

	</view>
</template>

<script>
	const app = getApp()
	export default {

		data() {
			return {
				active: 0,
				couponList: [
					{
						type: 1,
						isOpen: false
					},
					{
						type: 1,
						isOpen: false
					},
					{
						type: 1,
						isOpen: false
					},
					{
						type: 1,
						isOpen: false
					},
					{
						type: 2,
						isOpen: false
					},
					{
						type: 2,
						isOpen: false
					},
					],
				showNull: false
			}
		},
		async onLoad(options) {

		},
		async onShow() {

		},

		methods: {
			changeActive() {

			},
			getCouponListFun() {

			},
			
			onToggleItemDesc(item, index){
				this.couponList[index].isOpen = !item.isOpen
			}
		},
	}
</script>

<style lang="scss">
	@import "index.scss";
</style>